var ws;
window.onload = function () {
    // total扇形图
    var total_chart = echarts.init(document.getElementById('total_chart'));
    total_option = {
        title: {
            text: '数量',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '数量',
                type: 'pie',
                radius: '50%',
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var min_chart = echarts.init(document.getElementById('min_chart'));
    var max_chart = echarts.init(document.getElementById('max_chart'));
    var average_chart = echarts.init(document.getElementById('average_chart'));
    var median_chart = echarts.init(document.getElementById('median_chart'));
    min_option = {
        title: {
            text: '最小值',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
        },
        xAxis: {
            type: 'value'
        },
        series: [
            {
                label: {
                    position: 'right',
                    show: true
                },
                data: [],
                type: 'bar'
            }
        ]
    };
    max_option = {
        title: {
            text: '最大值',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
        },
        xAxis: {
            type: 'value'
        },
        series: [
            {
                label: {
                    position: 'right',
                    show: true
                },
                data: [],
                type: 'bar'
            }
        ]
    };
    average_option = {
        title: {
            text: '平均值',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
        },
        xAxis: {
            type: 'value'
        },
        series: [
            {
                label: {
                    position: 'right',
                    show: true
                },
                data: [],
                type: 'bar'
            }
        ]
    };
    median_option = {
        title: {
            text: '中位数',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
        },
        xAxis: {
            type: 'value'
        },
        series: [
            {
                label: {
                    position: 'right',
                    show: true
                },
                data: [],
                type: 'bar'
            }
        ]
    };
    // 连接服务器
    if (window.location.host.search("echizenryoma") !== -1)
        ws = new WebSocket("wss://www.echizenryoma.top:9000/radiocaca")
    else
        ws = new WebSocket("ws://127.0.0.1:9000/radiocaca")
    // 连接成功
    ws.onopen = function () {
        let hello = {
            key: "hello"
        };
        ws.send(JSON.stringify(hello));
    }
    ws.onerror = function () { alert("WebSocket连接发生错误") };

    // 接收到消息的回调方法
    ws.onmessage = function (msg) {
        console.log (msg.data);
        let data = JSON.parse(msg.data);
        let keys;
        if (data.key === "update_market_place") {
            data = data.data;
            keys = [];
            for (const key in data)
                keys.push(key);
            keys.sort();
            keys.reverse();

            total_option.series[0].data = [];
            min_option.yAxis.data = [];
            min_option.series[0].data = [];
            max_option.yAxis.data = [];
            max_option.series[0].data = [];
            average_option.yAxis.data = [];
            average_option.series[0].data = [];
            median_option.yAxis.data = [];
            median_option.series[0].data = [];
            for (const i in keys) {
                key = keys[i];
                total_option.series[0].data.push({value: data[key].total, name: key})  //赋值
                min_option.yAxis.data.push(key);
                min_option.series[0].data.push(data[key].min);
                max_option.yAxis.data.push(key);
                max_option.series[0].data.push(data[key].max);
                average_option.yAxis.data.push(key);
                average_option.series[0].data.push(data[key].average);
                median_option.yAxis.data.push(key);
                median_option.series[0].data.push(data[key].median);
            }
            total_chart.setOption(total_option);  //设置
            min_chart.setOption(min_option);  //设置
            max_chart.setOption(max_option);  //设置
            average_chart.setOption(average_option);  //设置
            median_chart.setOption(median_option);  //设置
        } else if (data.key === "update_price_limit") {
            data = data.data;
            keys = [];
            for (const key in data)
                if (key.length > 0)
                    keys.push(key);
            keys.sort();
            // keys.reverse();

            let add_html = '<form action="">';
            for (let i = 0; i < keys.length; ++i) {
                let key = keys[i];
                add_html += '<div class="block">' +
                    '<label>' + key + '</label>' +
                    '<input class="metamon_type" type="number" name="' + key + '" value=' + data[key] + '>' +
                    '</div>';
            }
            add_html += '<div class="block center">' +
                '<input type="button" value="提交" onclick="update_price_limit()" class="button button-primary button-small" >' +
                '<input type="reset" value="重置" class="button button-primary button-small" >' +
                '<input type="button" value="清零" onclick="zero_price_limit()" class="button button-primary button-small" >' +
                '</div>' + '</form>';
            document.getElementById('price_limit').innerHTML = add_html;
        } else if (data.key === "update_switch") {
            data = data.data;
            if (data.spider_flag)
                document.getElementById('spider_flag').className = "button button-pill button-raised button-primary button-small";
            else
                document.getElementById('spider_flag').className = "button button-pill button-small";

            document.getElementById('spider_delay').value = data.spider_delay;
        }else if (data.key === "pub_spider_loginfo"){
            data = data.data;
            document.getElementById("log_info").innerHTML += "\r" + data.time + " " + data.msg;
        } else {
        }
    }

    // 自适应
    window.onresize = function () {
        total_chart.resize()
        min_chart.resize()
        max_chart.resize()
        average_chart.resize()
        median_chart.resize()
    }
}
function update_price_limit () {
    console.log("update_price_limit");
    let price_limit = {
        key: "update_price_limit",
        data: {}
    }
    let input_metamon_type = document.getElementsByClassName("metamon_type");
    for (let i = 0; i < input_metamon_type.length; ++i) {
        let item = input_metamon_type[i];
        price_limit.data[item.name] = parseInt(item.value);
    }
    let str_price_limit = JSON.stringify(price_limit);
    console.log(str_price_limit);
    ws.send(str_price_limit);
}

function zero_price_limit () {
    console.log("update_price_limit");
    let price_limit = {
        key: "update_price_limit",
        data: {}
    }
    let input_metamon_type = document.getElementsByClassName("metamon_type");
    for (let i = 0; i < input_metamon_type.length; ++i) {
        let item = input_metamon_type[i];
        price_limit.data[item.name] = 0;
    }
    let str_price_limit = JSON.stringify(price_limit);
    console.log(str_price_limit);
    ws.send(str_price_limit);
}

function update_switch (change_name) {
    console.log("update_switch");
    let d_switch = {
        key: "update_switch",
        data: {
            "spider_flag": document.getElementById("spider_flag").className === "button button-pill button-raised button-primary button-small",
            "spider_delay": parseInt(document.getElementById("spider_delay").value),
        }
    }
    if (change_name === "spider_flag")
        d_switch.data.spider_flag = !d_switch.data.spider_flag;
    let str_switch = JSON.stringify(d_switch);
    console.log(str_switch);
    ws.send(str_switch);
}
